<template>
  <div class="app-container">
    <div class="search-box">
      <div class="search-hd">业务流程异常处理记录</div>
      <div class="search-bd">
        <el-form
          ref="form"
          :model="searchField"
          label-width="80px"
          :inline="true"
        >
          <!-- <el-form-item label="所属项目">
            <el-select
              v-model="searchField.pname"
              placeholder="请选择项目"
              size="small"
            >
              <el-option
                v-for="(project, index) in deptOptions"
                :key="index"
                :label="project"
                :value="project"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="监控源">
            <el-select
              v-model="searchField.oname"
              placeholder="请选择监控源"
              size="small"
            >
              <el-option
                v-for="(object, index) in resourceOptions"
                :key="index"
                :label="object"
                :value="object"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchField.date"
              size="small"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="发起人" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.WFAddName"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="工单号" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.WFDocNumber"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="员工号" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.userId"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="流程名" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.WFProcessName"
              clearable
            >
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="类型">
            <el-select v-model="searchField.type" placeholder="请选择类型" size="small">
              <el-option v-for="ty in typeOptionss" :key="ty.name" :label="ty.name" :value="ty.name"></el-option>
            </el-select>
          </el-form-item>-->
          <el-button
            type="success"
            size="small"
            @click="selectSelectived(searchField)"
            >查询</el-button
          >
          <!--<el-button type="success" size="small">导出</el-button>-->
        </el-form>
        <!-- 处置日志的Dialog弹框 -->

        <el-dialog title="处理日志" :visible.sync="dialogFormVisible">
          <el-form :model="logForm">
            <el-form-item label="处理人" :label-width="formLabelWidth">
              <el-input
                v-model="logForm.hcontact"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="logForm">
            <el-form-item label="处理时间" :label-width="formLabelWidth">
              <!--<el-input v-model="logForm.name" autocomplete="off"></el-input>-->
              <template>
                <div class="block">
                  <el-date-picker
                    v-model="logForm.htime"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </div>
              </template>
            </el-form-item>
          </el-form>
          <el-form :model="logForm">
            <el-form-item label="处理标题" :label-width="formLabelWidth">
              <el-input v-model="logForm.HTitle" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="logForm">
            <el-form-item label="处理内容" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                v-model="logForm.hcontent"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="logForm">
            <el-form-item label="处理结果" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                v-model="logForm.HResult"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handle2(logForm)"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!--&lt;!&ndash; 查看业务流程详细信息的dialog框 &ndash;&gt;
        <el-dialog
          title="异常信息"
          :visible.sync="dialogVisiblebpm"
          width="50%"
        >
          <span>{{ bpmdata }}</span>
          <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisiblebpm = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisiblebpm = false">确 定</el-button>
          </span>
        </el-dialog>-->
      </div>
    </div>
    <div class="main-box">
      <div class="main-hd">业务流程异常处理记录</div>
      <el-table
        v-loading="loading"
        :data="list"
        stripe
        max-height="500"
        fit
        highlight-current-row
      >
        <el-table-column label="序号" width="95" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="工单标题"
          prop="subject"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发起人"
          prop="wFAddName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="工单号"
          prop="wFDocNumber"
          align="center"
        ></el-table-column>
        <el-table-column
          label="流程名称"
          prop="wFProcessName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="处理人"
          prop="hcontact"
          align="center"
        ></el-table-column>
        <el-table-column
          label="处理时间"
          prop="htime"
          align="center"
        ></el-table-column>
        <!--<el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <span>{{ getTypeName(scope.row.type) }}</span>
          </template>
        </el-table-column>-->
        <!-- <el-table-column label="处理标题" prop="hTitle" align="center"></el-table-column>-->
        <!--<el-table-column label="是否警告" align="center">
          <template slot-scope="scope">
            <span :class="{redColor : scope.row.status === '1'}">{{ scope.row.isWarn === '1' ? '是' : '否' }}</span>
          </template>
        </el-table-column>-->
        <el-table-column label="处理内容" prop="hcontent" align="center">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="success"
              @click="showDetail(scope.row)"
              >查看</el-link
            >
          </template>
        </el-table-column>

        <!--<el-table-column label="事件内容" align="center">
          <template slot-scope="scope">
            <el-link :underline="false" type="success" @click="showDetail(scope.row)">查看</el-link>

          </template>
        </el-table-column>-->
        <el-table-column
          label="处理结果"
          prop="hResult"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              style="margin-left: 10px"
              type="success"
              size="mini"
              @click="handle(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" size="mini" @click="ignore(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          :current-page="searchField.page"
          :page-sizes="[10, 15, 20, 25, 30, 50]"
          :page-size="searchField.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <!-- 查看处理内容详细信息的dialog框 -->
      <el-dialog title="处理内容" :visible.sync="dialogVisiblebpm" width="50%">
        <span>{{ logForm.hcontent }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisiblebpm = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisiblebpm = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  findAllResult,
  findAllProjectName,
  findAllObjectName,
  logdeleteById,
  update,
} from "@/api/table";

export default {
  data() {
    return {
      list: null,
      loading: true,
      dialogVisiblebpm: false,
      bpmdata: null,
      typeOptions: [
        {
          id: "0",
          label: "宕机",
        },
        {
          id: "1",
          label: "连接超时",
        },
      ],
      deptOptions: [],
      resourceOptions: [],
      dialogTableVisiblebpm: false,
      typeOptionss: [
        {
          id: "1",
          name: "服务宕机",
        },
        {
          id: "2",
          name: "连接超时",
        },
      ],
      date: "",
      total: 10,
      searchField: {
        userId: "",
        pname: "",
        oname: "",
        type: "",
        startTime: "",
        endTime: "",
        page: 1,
        limit: 15,
        date: "",
      },
      dialogFormVisible: false,
      logForm: {
        id: "",
        htime: "",
        hcontact: "",
        hcontent: "",
        isignore: "",
        HTitle: "",
        HResult: "",
      },
      formLabelWidth: "120px",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
    };
  },
  created() {
    this.initListData();
  },
  methods: {
    // 查看
    showDetail(row) {
      this.dialogVisiblebpm = true;
      this.logForm.hcontent = row.hcontent;
    },
    // 忽略
    ignore(row) {
      this.open(row);
    },
    // 修改
    handle(row) {
      this.dialogFormVisible = true;
      this.logForm.id = row.id;
      this.logForm.htime = row.htime;
      this.logForm.hcontact = row.hcontact;
      this.logForm.hcontent = row.hcontent;
      this.logForm.isignore = row.isignore;
      this.logForm.HTitle = row.hTitle;
      this.logForm.HResult = row.hResult;
      this.logForm.isignore = 2;
    },
    initListData() {
      this.loading = true;
      findAllResult(this.searchField).then((res) => {
        this.list = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
      findAllProjectName().then((res) => {
        this.deptOptions = res.data;
        this.deptOptions.unshift("");
      });
      findAllObjectName().then((res) => {
        this.resourceOptions = res.data;
        this.resourceOptions.unshift("");
      });
    },
    selectSelectived(searchField) {
      findAllResult(searchField).then((res) => {
        this.list = res.data.rows;
        this.total = res.data.total;
        this.$message.success("查询成功");
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchField.limit = val;
      this.pagingQuery();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      console.log(`当前页: ` + val);
      this.searchField.page = val;
      this.pagingQuery();
    },
    // 更新日志
    updateLog(log) {
      log.isignore = 1;
      logdeleteById(log.id).then(res=>{
          if (res.flag == true) {
          this.$message.success("日志已忽略");
          this.initListData();
        } else {
          this.$message.error("日志忽略失败");
        }
      })
    },
    // 处理日志的确定请求
    handle2(logForm) {
      console.log(logForm);
      this.dialogFormVisible = false;
      // 向后台发送请求
      update(logForm).then((res) => {
        var flag = res.flag;
        if (flag) {
          this.$message.success("处置成功");
          this.logForm = {
            id: "",
            htime: "",
            hcontact: "",
            hcontent: "",
            isignore: "",
            HTitle: "",
            HResult: "",
          };
          // 重新查询日志
          this.initListData();
        } else {
          this.$message.error("处置失败");
        }
      });
    },

    // 消息提示框信息
    open(row) {
      this.$confirm("此操作将会忽略该条日志, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.updateLog(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消忽略",
          });
        });
    },
    // 分页查询函数
    pagingQuery: function () {
      findAllResult(this.searchField).then((res) => {
        this.list = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.redColor {
  color: red;
}

.search-hd {
  border-left: 2px solid #00a73c;
  padding: 10px;
  margin-bottom: 10px;
}

.search-bd {
  .el-button--small {
    margin-top: 3px;
  }
}

.main-box {
  .main-hd {
    height: 40px;
    line-height: 40px;
    background: #00a73c;
    color: #fff;
    padding-left: 10px;
  }

  .page-box {
    padding: 10px;
    text-align: center;
  }
}
</style>
